<template>
  <el-dialog
    title="新建文件"
    v-model="open"
    :close-on-click-modal="false"
    width="550px"
    @close="handleDialogClose"
  >
    <el-form
      class="add-file-form"
      :model="form"
      :rules="rules"
      ref="addFileForm"
      label-width="100px"
      label-position="top"
    >
      <el-form-item label="文件名称" prop="fileName">
        <el-input
          v-model="form.fileName"
          placeholder="请输入文件名称"
          type="textarea"
          autosize
          maxlength="255"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleDialogSure('addFileForm')"
          >确 定</el-button
        >
      </span>
    </template></el-dialog
  >
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { addFile } from "@/api/disk/file";
import fileList from "@/store/modules/fileList";


const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const data = reactive({
  form: {},
  rules: {
    fileName: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
  },
});
const loading = ref(false);
const emit = defineEmits(["close"]);
const props = defineProps({
  open: {
    type: Boolean,
  },
  extName: {
    type: String,
  },
});
const { form, rules } = toRefs(data);

function handleDialogClose() {
  emit("close");
}
/**
 * 新建文件对话框 | 确定按钮点击事件
 * @description 校验表单，校验通过后调用新建文件接口
 * @param {string} formName 表单ref值
 */
function handleDialogSure() {
  loading.value = true;
  form.value.dirId = fileList().dirId;
  form.value.fileName = `${form.value.fileName}.${props.extName}`;
  proxy.$refs.addFileForm.validate((valid) => {
    if (valid) {
      addFile(form.value)
        .then((res) => {
          proxy.$modal.msgSuccess("新建文件成功");
          loading.value = false;
          emit("close");
        })
        .catch(() => {
          loading.value = true;
        });
    }
  });
}
</script>

<style>
</style>